<template>
  <div>
    <div>vue中使用 iconfont 阿里巴巴在线生成的字体图标 -- symbol</div>
    <p>用 fill 指定颜色</p>
    <hr />
    <svg class="icon" aria-hidden="true" style="fill: green">
      <use xlink:href="#icon-iconfont5"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontxingxing"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontmingpian"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontriyongbaihuo"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontshipin"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontwujingongju"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontgongyichongwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontyundonghuwai"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontphone"></use>
    </svg>
    <!-- 扇子图形本身不能变色 -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfont-shanzi"></use>
    </svg>
  </div>
</template>

<script>
export default {
  mounted() {
    require("../assets/js/iconfont");
  },
};
</script>

<style type="text/css">
.icon {
  width: 4em;
  height: 4em;
  margin: 5px;
  vertical-align: -0.15em;
  fill: red;
  overflow: hidden;
}
</style>
